<template>
    <div class="content">
        <Header></Header>


        <van-swipe class="swiper-flash" :autoplay="5000" indicator-color="white">
            <van-swipe-item v-for="(image, index) in images" :key="index">
                <a :href="image.ad_link==''?'javascript:void(0);':image.ad_link">
                <van-image class="img" lazy-load :src="img(image.thumb)">
                    <template v-slot:loading>
                        <van-loading type="spinner" size="20"/>
                    </template>
                </van-image>
                </a>
            </van-swipe-item>
        </van-swipe>

        <van-row class="page-block">
            <div class="uni-flex uni-row smoney">
                <template v-for="(item,index) in moneyArr">
                    <router-link :to="{name:'buyIndex',query:{min:item.min,max:item.max}}" class="flex-item" v-if="item.min==0 && item.max>0">{{item.max}}万以下</router-link>
                    <router-link :to="{name:'buyIndex',query:{min:item.min,max:item.max}}" class="flex-item" v-if="item.min>0 && item.max==0">{{item.min}}万以上</router-link>
                    <router-link :to="{name:'buyIndex',query:{min:item.min,max:item.max}}" class="flex-item" v-if="item.min>0 && item.max>0">{{item.min}}-{{item.max}}万</router-link>
                </template>

            </div>

            <div class="uni-flex uni-row inx-car">
                <template v-for="(item,index) in menuArr">
                <router-link :to="{name:'buyIndex',query:{brand_id:item.brand_id,brand_name:item.brand}}" class="flex-item">
                    <img :src="img(item.brand_logo)" class="logo" alt="">
                    {{item.brand}}
                </router-link>
                </template>

                <router-link :to="{name:'buyIndex'}" class="flex-item">
                    <img src="@/assets/images/icon/more.svg" class="logo" alt="">
                    更多
                </router-link>
            </div>
        </van-row>

        <van-row class="page-block">
            <div class="inx-public-title" v-if="bkArr.length>0">
                <img class="icon" src="@/assets/images/icon/book.svg">
                <span class="text">二手车知识百科</span>

                <router-link :to="{name:'message',query:{cat:1}}" class="more">更多</router-link>
            </div>

            <van-swipe class="swiper-art" :autoplay="12000" indicator-color="white" v-if="bkArr.length>0">
                <van-swipe-item v-for="(art, index) in bkArr" :key="index">
                    <router-link :to="{name:'msgDetail',query:{id:art.article_id}}" >
                    <van-image class="img" lazy-load :src="img(art.thumb)" :title="art.title">
                        <template v-slot:loading>
                            <van-loading type="spinner" size="20"/>
                        </template>
                    </van-image>
                    </router-link>
                </van-swipe-item>
            </van-swipe>

            <hr class="inx-hr" v-if="bkArr.length>0"/>

            <div class="inx-public-title">
                <img class="icon" src="@/assets/images/icon/hard.svg">
                <span class="text">小白服务</span>

                <router-link to="/service" class="more">更多</router-link>
            </div>
            <div class="inx-service-box">
                <template v-for="(item,index) in svrArr">
                    <router-link :to="{name:'svrDetail',query:{id:item.id}}">
                        <van-image class="img pull-left" :class="{'pull-left':index==0,'pull-right':index==1}" lazy-load :src="img(item.thumb_min)">
                            <template v-slot:loading>
                                <van-loading type="spinner" size="20"/>
                            </template>
                        </van-image>
                    </router-link>
                </template>
            </div>

            <hr class="inx-hr"/>

            <div class="inx-public-title" v-if="collectArr.length==1">
                <img class="icon" src="@/assets/images/icon/star.svg">
                <span class="text">我的收藏</span>

                <router-link :to="{name:'userCollect'}" class="more">更多</router-link>
            </div>

            <div class="list-cell" v-if="collectArr.length==1">
                <div class="list-empty" v-if="collectArr.length==0">暂无收藏</div>

                <template v-for="(item,index) in collectArr">
                <router-link :to="{name:'buyDetail',query:{id:item.user_car_id}}" class="media-list">
                    <van-image class="media-list-logo pull-left" fit="cover" lazy-load :src="img(item.info.series_thumb,item.head_img)">
                        <template v-slot:loading>
                            <van-loading type="spinner" size="20"/>
                        </template>
                    </van-image>
                    <div class="media-list-body pull-left">
                        <div class="media-list-text-top">{{item.info.car_name}}</div>
                        <div class="media-list-text-tps">{{stampToDate(item.info.card_time,2)}}/{{item.info.mileage}}公里</div>

                        <div class="media-list-text-bottom">
                            <span class="pull-left">{{item.info.price}}万</span>
                        </div>
                        <ul class="msg-num">
                            <li class="item good">{{item.info.good_numb||0}}</li>
                            <li class="item star">{{item.info.collectCount||0}}</li>
                            <li class="item book">{{item.info.msgCount||0}}</li>
                        </ul>
                    </div>
                </router-link>
                </template>
            </div>

            <div class="inx-public-title" v-if="bookArr.length==1">
                <img class="icon" src="@/assets/images/icon/edit.svg">
                <span class="text">我的订阅</span>

                <router-link :to="{name:'userBook'}" class="more">更多</router-link>
            </div>

            <div class="list-cell" v-if="bookArr.length==1">
                <div class="list-empty" v-if="bookArr.length==0">暂无订阅</div>

                <template v-for="(item,index) in bookArr">
                    <router-link :to="{name:'buyDetail',query:{id:item.user_car_id}}" class="media-list">
                        <van-image class="media-list-logo pull-left" fit="cover" lazy-load :src="img(item.info.series_thumb,item.head_img)">
                            <template v-slot:loading>
                                <van-loading type="spinner" size="20"/>
                            </template>
                        </van-image>
                        <div class="media-list-body pull-left">
                            <div class="media-list-text-top">{{item.info.car_name}}</div>
                            <div class="media-list-text-tps">{{stampToDate(item.info.card_time,2)}}/{{item.info.mileage}}公里</div>
                            <div class="media-list-text-bottom">
                                <span class="pull-left">{{item.info.price}}万</span>
                            </div>
                            <ul class="pull-right msg-num">
                                <li class="item good">{{item.info.good_numb||0}}</li>
                                <li class="item star">{{item.info.collectCount||0}}</li>
                                <li class="item book">{{item.info.msgCount||0}}</li>
                            </ul>
                        </div>
                    </router-link>
                </template>

            </div>


            <!-- 推荐车源 -->
            <div class="inx-public-title">
                <img class="icon" src="@/assets/images/icon/remmd.svg">
                <span class="text">推荐车源</span>
            </div>

            <van-list class="list-cell no-border van-clearfix">
                <template v-for="item in list">
                    <router-link :to="{name:'buyDetail',query:{id:item.id}}" class="media-list">
                        <van-image class="media-list-logo pull-left" lazy-load fit="cover" :src="img(item.car?item.car.series_thumb:item.series.thumb,item.head_img)">
                            <template v-slot:loading>
                                <van-loading type="spinner" size="20"/>
                            </template>
                        </van-image>

                        <div class="media-list-body pull-left">
                            <div class="media-list-text-top">{{item.car?item.car.car_name:item.series.series_name}}</div>
                            <div class="media-list-text-tps">{{stampToDate(item.card_time,2)}}/{{item.mileage}}公里</div>
                            <div class="media-list-text-bottom">
                                <span class="pull-left">{{item.price}}万</span>
                                <div class="pull-right pro-time">{{getCarRefrsh(item.refresh_time)}}</div>
                            </div>

                            <ul class="pull-right msg-num">
                                <li class="item good">{{item.good_numb||0}}</li>
                                <li class="item star">{{item.collectCount||0}}</li>
                                <li class="item book">{{item.msgCount||0}}</li>
                            </ul>
                        </div>
                    </router-link>
                </template>
            </van-list>

            <infinite-loading :on-infinite="onLoad" ref="inLoading">
                <div slot="no-results" class="no-more">没有更多了～</div>
                <div slot="no-more" class="no-more">没有更多了～</div>
            </infinite-loading>

        </van-row>

        <Footer active="home"></Footer>
    </div>
</template>

<script>
    import Footer from '../../components/footer'
    import Header from '../../components/index_header'
    import InfiniteLoading from 'vue-infinite-loading';
    import storeJs from 'storejs';

    export default {
        name: "index",
        components: {
            Footer,
            Header,
            InfiniteLoading
        },
        data() {
            return {
                images: [], //首部广告
                bkArr: [], //知识百科
                svrArr:[], //服务项目
                moneyArr:[], //金额搜索
                menuArr:[], //菜单
                bookArr:[], //订阅
                collectArr:[], //收藏

                page: 1,
                s: false,
                list: [],

            }
        },
        computed: {},
        mounted: function () {
            //幻灯片
            this.getIndexAd();

            //首页数据初始化
            this.init();

            if(storeJs("down_one")!=1){
                var str="请您务必审慎阅读，充分理解\"服务协议\"和\"隐私政策\"各条款，我们需要收集您的个人地址信息、操作日志等，您可以在地址设置中查看、变更、删除个人信息。您可阅读《<a href=\"#/msg_detail?id=1\" style=\"color: #00a0e9\">服务协议</a>》和《<a href=\"#/msg_detail?id=2\" style=\"color: #00a0e9\">隐私政策</a>》了解详细信息。如您同意，请点击\"同意\"开始接受我们的服务。";
                this.$dialog.confirm({
                    confirmButtonText: '同意',
                    cancelButtonText: '暂不使用',
                    message: str
                }).then(() => {
                    storeJs.set("down_one",1);
                }).catch(() => {
                    // on cancel
                });
            }

        },
        methods: {
            init(){
                this.$api.index.getData().then(res=>{
                    var res=res.data;

                    this.menuArr=res.data.menu.data;
                    this.bkArr=res.data.article;
                    this.svrArr=res.data.service.data;
                    this.moneyArr=res.data.moneyKey;
                    this.bookArr=res.data.userBook;

                    if(res.data.userCollect.data){
                        this.collectArr=res.data.userCollect.data;
                    }
                });

                var that=this;

                this.$api.index.checkV().then(res=>{
                    var res=res.data;

                    if(res.data!='1.0'){
                        that.$dialog.confirm({
                            title: '更新',
                            message: '有新的版本，您是否立即更新！'
                        }).then(() => {
                            var downUrl = "http://www.xb2sc.cn/app/xiaobai.apk";
                            window.location.href = downUrl;
                        }).catch(() => {
                            // on cancel
                        });
                    }

                });
            },
            onLoad($state) {
                var that=this;

                this.$api.index.getRecommend(that.page,{}).then(res=>{
                    res=res.data;

                    if (res.data.data.length) {
                        that.list.push(...res.data.data);
                        that.page++;

                        $state.loaded();
                    } else {
                        $state.complete();
                    }
                });
            },

            getIndexAd() {
                this.$api.index.getAd({
                    pid:1
                }).then(res=>{
                    res=res.data;
                    this.images=res.data;
                });
            }
        },
    }
</script>

<style lang="scss" scoped>
    @import "../../assets/scss/index.scss";
</style>
